<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/backstage/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/backstage/css/admin.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script th:src="@{/backstage/js/jquery.js}"></script>
    <script th:src="@{/backstage/js/pintuer.js}"></script>

    <!--  bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/../bootstrap/css/bootstrap.min.css}">
    <script type="text/javascript" th:src="@{/../bootstrap/js/bootstrap.min.js}"></script>

    <!--  bs_pagination plugin -->
    <link rel="stylesheet" type="text/css" th:href="@{/../bootstrap/css/jquery.bs_pagination.min.css}">
    <script type="text/javascript" th:src="@{/../bootstrap/js/jquery.bs_pagination.min.js}"></script>
    <script type="text/javascript" th:src="@{/../bootstrap/localization/en.js}"></script>

    <script>
        $(function () {
            //当页面加载完成，查询所有数据的第一页以及所有数据的总条数,默认每页显示5条
            queryColumnByConditionForPage(1, 5);

            //给"全选"按钮添加单击事件
            $("#check-all").click(function () {
                $("tbody tr td input").prop("checked", this.checked);
            });
            $("tbody").on("click", "tr td input", function () {
                //如果列表中的所有checkbox都选中，则"全选"按钮也选中
                if ($("tr td input").size() == $("tr td input:checked").size()) {
                    $("#check-all").prop("checked", true);
                } else {//如果列表中的所有checkbox至少有一个没选中，则"全选"按钮也取消
                    $("#check-all").prop("checked", false);
                }
            });

            // 给"添加"按钮添加单击事件
            $("#add-btn").click(function () {
                window.location.href = "/backstage/column/add";
            });

            // 给"删除"按钮添加单击事件
            $("#del-btn").click(function () {
                //收集参数
                //获取列表中所有被选中的checkbox
                var checkedIds = $("tr td input:checked");
                if (checkedIds.size() == 0) {
                    alert("必须选中最少一个栏目");
                    return;
                }

                if (window.confirm("确定删除吗？")) {
                    // 封装参数，将选中的栏目的id存在数组arr中
                    var arr = [];
                    checkedIds.each(function (i, n) {
                        arr.push($(this).val());
                    });
                    // 发送请求
                    $.ajax({
                            url: '/backstage/column/del',
                            data: {arr: arr},
                            type: 'post',
                            dataType: 'json',
                            traditional: true,
                            success: function (data) {
                                if (data.code == "1") {
                                    //跳转到业务主页面
                                    window.location.href = "/backstage/column/list";
                                } else {
                                    //提示信息
                                    alert(data.message);
                                }
                            }
                        }
                    );
                }
            });

            // 给"修改"按钮添加单击事件
            $("#edit-btn").click(function () {
                //收集参数
                //获取列表中所有被选中的checkbox
                var checkedIds = $("tr td input:checked");

                if (checkedIds.size() == 0) {
                    alert("请选择操作对象");
                    return;
                }
                if (checkedIds.size() > 1) {
                    alert("只能选中一个栏目");
                    return;
                }
                // 跳转修改页面
                window.location.href = '/backstage/column/edit/' + checkedIds.val();
            });

            // 给"置顶"按钮添加单击事件
            $("#sticky-btn").click(function () {
                //收集参数
                //获取列表中所有被选中的checkbox
                var checkedIds = $("tr td input:checked");

                if (checkedIds.size() == 0) {
                    alert("请选择操作对象");
                    return;
                }
                if (checkedIds.size() > 1) {
                    alert("只能选中一个栏目");
                    return;
                }
                let id = checkedIds.val()
                // 发起请求
                $.post('/backstage/column/sticky',
                    {id, id},
                    function (data) {
                        if (data.code == "1") {
                            //跳转到业务主页面
                            window.location.href = "/backstage/column/list";
                        } else {
                            //提示信息
                            alert(data.message);
                        }
                    });
            });

            // 给"搜索"按钮添加单击事件
            $("#select-btn").click(function () {
                //查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
                queryColumnByConditionForPage(1, $("#paginate").bs_pagination('getOption', 'rowsPerPage'));
            });


            // 分页
            function queryColumnByConditionForPage(pageNo, pageSize) {
                // 收集参数
                let state = $("#state").find("option:selected").val();
                let name = $("#name").val().trim();
                // 发送请求
                $.ajax({
                    url: '/backstage/column/queryColumnByConditionForPage',
                    data: {
                        state: state,
                        name: name,
                        pageNo: pageNo,
                        pageSize: pageSize
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        //取消"全选"按钮
                        $("#chckAll").prop("checked", false);

                        let html = "";
                        for (let i = 0; i < data.columns.length; i++) {
                            html += "<tr>"
                            html += "<td><input type='checkbox' value='" + data.columns[i].columnId + "'/></td>"
                            html += "<td>" + data.columns[i].managerId + "</td>"
                            html += "<td>" + data.columns[i].columnName + "</td>"
                            if (data.columns[i].columnState == '1') {
                                html += "<td><font color='#00CC99'>启用</font></td>"
                            } else if (data.columns[i].columnState == '0') {
                                html += "<td><font color='#ff0000'>禁用</font></td>"
                            }
                            html += "<tr>"
                        }

                        $("#tbody").html(html)

                        //计算总页数
                        var totalPages = 1;
                        if (data.totalRows % pageSize == 0) {
                            totalPages = data.totalRows / pageSize;
                        } else {
                            totalPages = parseInt(data.totalRows / pageSize) + 1;
                        }
                        //对容器调用bs_pagination工具函数，显示翻页信息
                        $("#paginate").bs_pagination({
                            currentPage: pageNo,//当前页号,相当于pageNo
                            rowsPerPage: pageSize,//每页显示条数,相当于pageSize
                            totalRows: data.totalRows,//总条数
                            totalPages: totalPages,  //总页数,必填参数.
                            visiblePageLinks: 5,//最多可以显示的卡片数
                            showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
                            showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
                            showRowsInfo: true,//是否显示记录的信息，默认true--显示
                            //用户每次切换页号，都自动触发本函数;
                            //每次返回切换页号之后的pageNo和pageSize
                            onChangePage: function (event, pageObj) {
                                queryColumnByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
                            }
                        });
                    }
                });
            }
        });
    </script>
</head>
<body>
<div>
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="bi bi-list-ul"> 栏目列表</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <button id="add-btn" class="button border-main bi bi-plus-square"> 添加</button>
                    <button id="del-btn" class="button border-red bi bi-trash"> 删除</button>
                    <button id="edit-btn" class="button border-yellow bi bi-pencil-square"> 修改</button>
                    <button id="sticky-btn" class="button border-middle bi bi-arrow-up-circle-fill"> 置顶</button>
                </li>
                <li>搜索：</li>
                <li>
                    <select id="state" class="input">
                        <option value="">状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </li>
                <li>
                    <input id="name" type="text" placeholder="请输入搜索关键字" class="input"
                           style="width:250px; line-height:17px;display:inline-block"/>
                    <button id="select-btn" class="button border-main bi bi-search"> 搜索</button>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th title="全选"><input type="checkbox" id="check-all"/></th>
                <th>创建人</th>
                <th>栏目名</th>
                <th>状态</th>
            </tr>
            </thead>

            <tbody id="tbody">
            <!--            <tr th:each="column:${columns}">-->
            <!--                <td>-->
            <!--                    <input type="checkbox" th:value="${column.columnId}"/>-->
            <!--                </td>-->
            <!--                <td th:text="${column.managerId}"></td>-->
            <!--                <td th:text="${column.columnName}"></td>-->
            <!--                <td>-->
            <!--                    <font color="#00CC99" th:if="${column.columnState=='启用'}">启用</font>-->
            <!--                    <font color="#ff0000" th:if="${column.columnState=='禁用'}">禁用</font>-->
            <!--                </td>-->
            <!--            </tr>-->
            </tbody>
        </table>

        <div id="paginate"></div>
    </div>
</div>
</body>
</html>